<template>
  <div class="block-title">
    <div class="block-title-con" :style="{ background: primary }"></div>
    <span class="block-title-name">{{ name }}</span>
  </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from "@/stores/modules/global";
import { storeToRefs } from "pinia";

defineProps<{ name: string }>();

const globalStore = useGlobalStore();
const { primary } = storeToRefs(globalStore);
</script>

<style lang="scss" scoped>
.block-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  &-con {
    width: 4px;
    height: 16px;
    border-radius: 4px;
  }
  &-name {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
